<template>
  <div>
    <el-container>
      <el-container>
        <el-header>

          <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="id" :label-width="formLabelWidth">
                <el-input v-model="form.id" ></el-input>
              </el-form-item>
              <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="生日" style="padding-left: 50px">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" style="padding-left: 50px">
                <el-input v-model="form.pass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="大学" style="padding-left: 50px">
                <el-input v-model="form.college" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="主修" style="padding-left: 50px">
                <el-input v-model="form.major" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="commitForm(1)">确 定</el-button>
            </div>
          </el-dialog>


          <el-dialog title="修改用户信息" :visible.sync="up_dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="id" :label-width="formLabelWidth">
                <el-input v-model="form.id" ></el-input>
              </el-form-item>
              <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="生日" style="padding-left: 50px">
                <el-input v-model="form.birth" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" style="padding-left: 50px">
                <el-input v-model="form.pass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="大学" style="padding-left: 50px">
                <el-input v-model="form.college" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="主修" style="padding-left: 50px">
                <el-input v-model="form.major" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="up_dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="commitForm(2)">确 定</el-button>
            </div>
          </el-dialog>

          <el-row >
            <div class="op-row">
              <div CLASS="stu-allbtns">
                <el-button type="success" @click="dialogFormVisible = true">添加按钮</el-button>
                <el-button :disabled="up" @click="toUpdate"  type="warning">修改按钮</el-button>
                <el-button :disabled="del" @click="toDel"  type="danger">删除按钮</el-button>
              </div>
              <div class="stu-search">
                <el-input v-model="search" placeholder="输入关键字"></el-input>
                <el-select  v-model="classed" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <el-button icon="el-icon-search" circle @click="searchByCondition"></el-button>
              </div>
            </div>
          </el-row>
        </el-header>
        <el-main>
          <el-table @row-click="handleRowChange" max-height="490" ref="multipleTable"
                    @selection-change="handleSelectionChange" tooltip-effect="dark"
                    :data="userList"
                    style="width: 100%; cursor:pointer;" :row-class-name="tableRowClassname">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="用户id" width="180" sortable> </el-table-column>
            <el-table-column prop="name" label="用户姓名" width="180" sortable> </el-table-column>
            <el-table-column prop="phone" label="电话" width="180" sortable> </el-table-column>
            <el-table-column prop="birth" label="生日" width="180" sortable> </el-table-column>
            <el-table-column prop="pass" label="密码" width="180" sortable> </el-table-column>
            <el-table-column prop="college" label="大学" width="180" sortable> </el-table-column>
            <el-table-column prop="major" label="主修" width="180" sortable> </el-table-column>
          </el-table>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script>
    export default {
      data() {
        return {
          input: '',
          up:false,
          del:false,
          dialogFormVisible: false,
          up_dialogFormVisible: false,
          classed: [],
          multipleSelection1: [],
          vle: 0,
          search: '',
          formLabelWidth: '120px',
          form: {
            id:'',
            name:'',
            phone:'',
            birth:'',
            pass:'',
            college:'',
            major:''
          },
          userList: [{
            id:'1',
            name: '王小虎',
            phone:'17852234111',
            birth:'1997-1-1',
            pass:'123456',
            college:'青岛大学',
            major:'软件'
          }, {
            id:'1',
            name: '王小虎',
            phone:'17852234111',
            birth:'1997-1-1',
            pass:'123456',
            college:'青岛大学',
            major:'软件'
          }, {
            id:'1',
            name: '王小虎',
            phone:'17852234111',
            birth:'1997-1-1',
            pass:'123456',
            college:'青岛大学',
            major:'软件'
          },
            {
              id:'1',
              name: '王小虎',
              phone:'17852234111',
              birth:'1997-1-1',
              pass:'123456',
              college:'青岛大学',
              major:'软件'
            },
            {
              id:'1',
              name: '王小虎',
              phone:'17852234111',
              birth:'1997-1-1',
              pass:'123456',
              college:'青岛大学',
              major:'软件'
            },
            {
              id:'1',
              name: '王小虎',
              phone:'17852234111',
              birth:'1997-1-1',
              pass:'123456',
              college:'青岛大学',
              major:'软件'
            }]
        }
      },
      methods:{
        handleRowChange(row, event, column){
          console.log(row.stuId)
          this.$router.push({ name: "hwinfo", params: { id:row.stuId } });
        },handleSelectionChange(val) {
          this.multipleSelection1 = val;
        },tableRowClassname({row, rowIndex}) {
          if (rowIndex % 2 === 1) {
            return 'warning-row';
          } else if (rowIndex % 2 === 0) {
            return 'success-row';
          }
          return '';
        },toDel() {
          if (this.multipleSelection1.length > 0) {
            this.$confirm('此操作将删除该信息, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              var ids = [];
              this.multipleSelection1.forEach(item => {
                ids.push(item.id)
              });
              // console.log(ids.join(","))
              //删除请求
              console.log(ids.join(","))
              this.$http
                .get("http://localhost:8888/coustumer/delUser?id="+id.join(","))
                .then(result => {
                  if (result.body.status === 0) {
                    this.classed = result.body.message;
                  }
                });

              //重新查一遍回显，lastRequest,再发一遍
              this.userList.splice()
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });

          } else {
            this.$message({
              type: 'error',
              message: '请勾选你需要删除的选项~'
            });
          }
        },toUpdate() {
          if (this.multipleSelection1.length !== 1) {
            this.$message({
              type: 'error',
              message: '每次只能修改一项哦~'
            });
          } else {
            this.tempId = this.multipleSelection1[0].stuId
            this.form = this.multipleSelection1[0];
            this.up_dialogFormVisible = true
            console.log(this.multipleSelection1[0].stuName)
          }
        },searchByCondition() {
          // console.log(this.search);
          // console.log(this.classed);
          var idArr = [];
          this.classed.forEach(item => {
            idArr.push(item)
          })
          console.log(idArr.join(","))

          this.$http
            .get("api/searchByCondition/" + idArr.join(","))
            .then(result => {
              if (result.body.status === 0) {
                console.log("OK")
                this.contactList = result.body.message;
              }
            });
        },getUserList() {
          // this.$http
          //   .get("http://localhost:8888/coustumer/queryUserByParms"+)
          //   .then(result => {
          //     this.classed = result.body.message
          //   });
        },commitForm(val) {
          this.options.some(item=>{
            if(item.value=== this.form.belong){
              this.form.belong = item.label
            }
          })
          if (val === 1) {
            this.dialogFormVisible = false
            //添加请求
            this.$http.post("http://localhost:8888/coustumer/insertUser?username="+this.form.name+"&phone="+this.form.phone
              +"&brithdate="+this.form.birth+"&collage="+this.form.college+"&password="+this.form.pass
              +"&major="+this.form.major)
              .then(function(data){

                console.log(data)

              }).catch(function(){
              console.log("服务器异常！");
            });
            //重发上一次的请求，查
            this.userList.unshift(this.form)
            this.$message({
              type: 'success',
              message: '添加成功'
            });
            this.getUserList()
          } else {
            this.up_dialogFormVisible = false//清空from

            this.$http.post("http://localhost:8888/coustumer/updateUser?id="+this.form.id+"&username="+this.form.name
              +"&phone="+this.form.phone+"&brithdate="+this.form.birth
              +"&collage="+this.form.college
              +"&password="+this.form.password+"&major="+this.form.major)
              .then(function(data){
                this.$message({
                  type: 'success',
                  message: '修改成功'
                });
                console.log(data)

              }).catch(function(){
              console.log("服务器异常！");
            });

            this.$message({
              type: 'success',
              message: '修改成功'
            });
          }
        },watch: {
          dialogFormVisible: function (newVal, oldVal) {
            // console.log("newVal:" + newVal + "   oldVal:" + oldVal)
            if (!newVal) {
              // console.log("修改")
              this.form = {
                id: '',
                date: '',
                name:'',
                content:''
              }
            }
          },up_dialogFormVisible:function (newV,oldV) {
            if (!newV) {
              this.form = {
                id: '',
                date: '',
                name:'',
                content:''
              }
            }
          }
        }


      }
    }
</script>
<style  scoped>
  .op-row{
    padding: 10px;
    display: flex;
    justify-content: space-between;

  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;

  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

</style>
